import { Image, ScrollView, Text, View } from '@tarojs/components';
import { getCurrentInstance } from '@tarojs/runtime';
import Taro, { useLoad } from '@tarojs/taro';
import { useState } from 'react';
import { Location } from '@nutui/icons-react-taro';
import { Router } from '@tarojs/runtime/dist/current';
import { Divider, Swiper } from '@nutui/nutui-react-taro';
import MovieCard from './components/MovieCard';

import "./cinemaDetail.scss";


type movieDataProps = {
    cinemaId: number; // 电影院ID
    cinemaName: string; // 电影院名称
    cityName: string; // 城市名称
    movies: {
        desc: string; // 电影时长|类型|主演
        id: number; // 电影ID
        img: string; // 电影图片
        nm: string; // 电影名称
        dur: number; // 电影时长
        sc: string;// 电影评分
        shows: {
            showDate: string; // 上映日期
            plist: {
                discountSellPrice: string; // 售票价;
                dt: string; // 场次时间;
                lang: string; // 语言;
                th: string; // 放映厅;
                tm: string; // 开场时间;
                tp: string; // 放映类型2D/3D;
                vipPrice: string; // 会员价;
                vipPriceName: string; // 会员价名称;
            }[];//上映场次;
        }[];
    }[];
};

type cinemaDataProps = {
    addr: string;//地址
    cityId: number;//城市id
    lat: number;//纬度
    lng: number;//经度
    headImg: string;//头图
    nm: string;//名称
    tel: string;//电话   

};

const CinemaDetail = () => {
    const [cinemaMovieData, setCinemaMovieData] = useState<movieDataProps>(); // 初始化 cinemaData 为 undefined，类型为 movieDataProps | undefined;
    const [cinemaData, setCinemaData] = useState<cinemaDataProps>(); // 初始化 cinemaData 为 undefined，类型为 movieDataProps | undefined;
    const [selectPostImg, setSelectPostImg] = useState(0); // 初始化 cinemaData 为 undefined，类型为 movieDataProps | undefined;
    useLoad(() => {
        // 获取动态路由参数 id
        const { id } = (getCurrentInstance().router as Router).params as { id: string; }; // 使用 as 断言类型为 { id: string }，确保 id 是 string 类型的属性;
        console.log('动态参数 id:', id);
        Taro.request({
            url: `https://apis.netstart.cn/maoyan/cinema/shows?cinemaId=${id}`,
            success: function (res) {
                setCinemaMovieData(res.data.data);
            }
        });
        Taro.request({
            url: `https://apis.netstart.cn/maoyan/cinema/detail?cinemaId=${id}`,
            success: function (res) {
                setCinemaData(res.data.data);
            }
        });
    });
    if (!cinemaMovieData || !cinemaData) { // 检查 cinemaData 是否为 undefined，若为 undefined，则返回 null;
        return (

            <View>
                加载中...
            </View>
        ); // 或者你可以返回一个加载中的提示组件;
    } else {
        const { cinemaName, movies } = cinemaMovieData;
        const { addr } = cinemaData;
        const movieImgList = movies.map((item, index) => {
            return (item.img);
        });
        console.log(movieImgList);
        return (
            <View className='cinemaDetailContainer'>
                <View className='cinemaDetailContainer-titleContainer' >
                    <View style={{ display: "flex", flexDirection: "column" }}>
                        <Text className='cinemaDetailContainer-titleContainer-title' style={{ fontWeight: "bold" }}>{cinemaName}</Text>
                        <Text style={{ color: "gray" }}>{addr}</Text>
                    </View>
                    <Location className='cinemaDetailContainer-titleContainer-locationPic' color='teal' size="30px" />
                </View>
                <View className='swiperContainer' >
                    <Image className='swiperContainer-background' style={{ width: "375px", height: "275px", objectFit: "cover" }} src={movieImgList[selectPostImg]} />
                    <Swiper className='loopimgContainer' height={275} width={375} loop previousMargin='90px' nextMargin='90px' style={{ position: "absolute" }} onChange={(e) => { setSelectPostImg(e.detail.current); console.log(e.detail.current); }}>
                        {movieImgList.map((item, index) => {
                            return (
                                <Swiper.Item className='swiperItem' key={index}>
                                    <Image className={"swiperItem-image " + (selectPostImg === index ? "isActive" : "")} src={item} />
                                </Swiper.Item>
                            );
                        })
                        }
                    </Swiper>
                </View>
                <MovieCard cinemaMovieData={cinemaMovieData.movies[selectPostImg]} />




            </View>
        );
    }

};

export default CinemaDetail;


// style={{ backgroundImage: `url(${movieImgList[0]})` }}